<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        h1{
            width: 100%;
            height: 100px;
            background-color: skyblue;
            display: flex;
            justify-content: center;
            align-items: center;
        }

       
        form{
            width: 600px;
            border: 3px solid pink;
            border-radius: 15px;
            margin: 30px auto;
            padding: 20px;
            padding-top: 50px;
            display: flex;
            flex-direction: column;
            position: relative;
        }

        form > label{
            height: 50px;
            font-size: 30px;
        }

        form > label > input{
            width: 200px;
            height: 30px;
            border: none;
            outline: none;
        }
        form > span{
            position: absolute;
            top: 0;
            left: 50%;
            color: red;
            font-size: 20px;
            display: none;
        }
        form > span.active{
            display: block;
        }
        form > button{
            width: 100px;
            height: 30px;
            border: none;
            outline: none;
            background-color: #ccc;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>登录页</h1>
    <form>
        <span>用户名或者密码错误,请重新输入</span>
        <label for="">
            用户名:
            <input type="text" name="username" class="name">
        </label>
        <label for="">
            密  码:
            <input type="password" name="password" class="password">
        </label>
        <button>登录</button>
    </form>
    <script src="./reg.js"></script>
    <!-- // gaohj  ghj123456 -->
    <script>
        // 获取元素
        const form = document.querySelector('form');
        const name = document.querySelector('.name');
        const password = document.querySelector('.password');
        const errInfo = document.querySelector('span');


        // form 有默认行为 

        form.onsubmit = function(e){
            // 阻止默认行为
            e.preventDefault();

            const username = name.value;
            const pwd = password.value;
            if(!username || !pwd){
               
                return alert('用户名或者密码不能为空');
            }


            // 如果输入了 
            // 验证是否正确
            if(!usernamecheck(username) || !passwordcheck(pwd)){
                return alert('用户名或者密码格式不正确');
            }
            
            // 发送请求

            // ajax发送请求 
            const xhr = new XMLHttpRequest();
            xhr.open('post','http://localhost:8888/users/login');
            // 接收响应  
            xhr.onload = function(){
                const res = JSON.parse(xhr.responseText);
                if(res.code === 0){
                    //登录失败 
                    errInfo.classList.add('active');
                    // 让span 显示 
                    return
                }

                // 走在这里 说明登录成功

                // 保存id和token 
                window.localStorage.setItem('id',res.user.id);
                window.localStorage.setItem('token',res.token);
                // 跳转到首页
                window.location.href = './index.html';

            }


            xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
            xhr.send(`username=${username}&password=${pwd}`)     
        }
        
        
    
    </script>
    

</body>
</html>